<template>
  <div>
    <!-- 搜索框 -->
    <search-card>
      <!-- 自定义搜索内容 -->
      <slot></slot>
    </search-card>
    <!-- 表格内容 -->
    <el-card shadow="never" class="table-card">
      <el-button size="medium" type="success" v-if="btnConfig.showAddBtn" @click="addRow">
        <el-icon class="icon"><elementCirclePlusFilled/></el-icon> 
        <span class="icon-font">添加</span>
      </el-button>
      <el-button size="medium" type="danger" v-if="btnConfig.showdeleteBtn" @click="deleteRows">
        <el-icon class="icon"><elementDelete/></el-icon> 
        <span class="icon-font">删除</span>
      </el-button>
      <el-button size="medium" type="warning" v-if="btnConfig.showImportBtn" @click="showImportDialog">
        <el-icon class="icon"><elementUploadFilled/></el-icon> 
        <span class="icon-font">导入</span>
      </el-button>
      <!-- 导入界面 -->
      <BtnImport ref="RefBtnImport" v-if="btnConfig.showImportBtn"
        :fileType="btnConfig.fileType"
        :accept="btnConfig.accept"
        :action="btnConfig.action"
        :limits="btnConfig.limits"></BtnImport>
        <!-- @importInfo="setImportInfo"/> -->
      <!-- 导出按钮 -->
      <BtnExport v-if="btnConfig.showExportBtn"
        :columns = "tableData.columns"
        :data = "tableData.all"
        :title = "exportTitle"
      ></BtnExport>
      
      <!-- 表格内容 -->
      <table-template 
        class="main-table"
        :tableData="tableData"
        :tableConfig="tableConfig"
        v-loading="loading"
        @handleDelete="handleRowDelete"
        @handleEdit="handleRowEdit"
      ></table-template>
      <!-- 分页条 -->
      <el-pagination
        class="pagination"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 20, 40, 100, 9999999]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next"
        :total="tableData.all.length"
        prev-text="上一页"
        next-text="下一页">
      </el-pagination>
    </el-card>

    <!-- <el-dialog ref="opDialog">
      <slot></slot>
    </el-dialog> -->
    <button @click="getData">tianjai</button>
  </div>
</template>

<script>
import { reactive, ref, toRefs } from 'vue';
import { ElMessage } from 'element-plus';
// import axios from 'axios'
import service from '/@/utils/request';
import TableTemplate from '/@/components/table/template/template.vue'
import SearchCard from '/@/components/table/card/search.vue';
import BtnImport from '/@/components/table/button/import.vue';
import BtnExport from '/@/components/table/button/export.vue';
export default {
	name: 'test',
  props:{
    httpInfo: {
      type: Object,
      default: () => {
        return {
          listUrl: '/admin/role/getList'
        }
      }
    },
    exportTitle:{
      type: String,
      default: () => {
        return '数据导出'
      }
    }
  },
  components: {
    SearchCard,
    TableTemplate,
    BtnImport,
    BtnExport,
  },
	setup(props) {
    const defaultColumns = [{ // 默认列
      prop: "noop",
      label: "",
      sortable: true,
      showOverflowTooltip: true,
      align: "center"
    }]
    const tableConfig = reactive({ // 表格配置
      stripe: true,
      maxHeight: null,
      hasSelectionRole: true,
      button:['edit','del']
    })
    const btnConfig = {
      showAddBtn: true,
      showdeleteBtn: true,
      showImportBtn: true,
      showExportBtn: true,
      fileType: 'dep', // 下载文件模板类型
      accept: '.xls,.xlsx', // 文件类型
      action: '/admin/upload/dep', // 文件上传地址
      limits: 1, // 上传数量限制
    }

    const loading = ref(false)
    const allProps = toRefs(props)
    const httpInfos = allProps.httpInfo

    let currentPage = ref(1)
    let pageSize = ref(5)

    let tableData = reactive({
      columns: [], // 表格标题
      all: [], // 所有的数据
      data: []
		})

    // 分页工具
    const refreshCurrentData = () =>{ // 界面刷新
      if (tableData.all !== undefined) {
        tableData.data = tableData.all.slice((currentPage.value - 1) * pageSize.value, currentPage.value * pageSize.value)
      }
    }

    const getData = async (params) => { // 获取所有数据
      loading.value = true
      let dataInfo = await service.get(httpInfos.value.listUrl, {data: params}) // 获取数据
      if (dataInfo.code === 200) {
        tableData.columns = dataInfo.data.columns != undefined ? dataInfo.data.columns: defaultColumns 
        tableData.all = dataInfo.data.data != undefined ? dataInfo.data.data: []
        refreshCurrentData()
      } else {
        tableData.columns = defaultColumns
        tableData.all = []
      }
      loading.value = false
    }

    getData() // 获取数据

    const handleSizeChange = (size) => { // 每页个数改变
      currentPage.value = 1
      pageSize.value = size
      refreshCurrentData()
    }
    const handleCurrentChange = (newPage) => { // 当前页改变
      currentPage.value = newPage
      refreshCurrentData()
    }

    // 每一行的按钮
    const handleRowDelete = (index, row) => {
      ElMessage.success('删除成功'+ index + row);
    }
    const handleRowEdit = (index, row) => {
      ElMessage.success('修改成功'+ index + row);
    }

    // 表头的按钮
    const addRow = () => {
      ElMessage.success('addRow');
    }
    const deleteRows = () => {
      ElMessage.success('deleteRows');
    }
    const RefBtnImport = ref();
    const showImportDialog = () => {
      RefBtnImport.value.showDialog()
    }

    const change = ()=>{
      tableData.all.push({id: 23,	name: '机构角色23', type: '部门3'})
    }

		return {
      loading,
      tableData, 
      tableConfig,
      pageSize,
      currentPage,
      btnConfig,
      RefBtnImport,
      change,
      getData,
      handleRowDelete,
      handleRowEdit,
      handleSizeChange,
      handleCurrentChange,
      addRow,
      deleteRows,
      showImportDialog,
    };
	},
};
</script>

<style lang="scss" scoped>
.table-card{
  margin-top: 10px;
}
.pagination{
  margin-top: 10px;
}
.icon{
  margin-left: -5px;
  margin-top: -1px;
  text-align: center;
  vertical-align: middle;
  display: inline-block;
}
.icon-font{
  text-align: center;
  vertical-align: middle;
  display: inline-block;
}
</style>
